<template>
  <!-- 列表 -->
  <div
    v-srcollloadmore="srcollloadmore"
    class="list_list"
    ref="scollElement"
    :style="
      height ? ' height: calc(100% - 128px);' : ' height: calc(100% - 90px);'
    "
  >
    <transition-group name="list-complete">
      <div class="list" v-for="(v, i) in list" :key="i">
        <div class="list_div">
          <div
            class="list_img_div"
            ref="list1"
            :style="{
              background:
                'url(' +
                v.materialImage +
                ') center center / contain no-repeat',
            }"
            @click="listimgclick(v.materialImage, v.materialName, v.materialId)"
          >
            <div class="xin" v-show="xin">
              <img
                class="list_xin"
                @click.stop="listcollectClick(1, i, v.materialId)"
                v-if="v.collectTag"
                :src="img.xin1"
              />
              <img
                class="list_xin"
                @click.stop="listcollectClick(0, i, v.materialId)"
                v-else
                :src="img.xin"
              />
            </div>
          </div>
          <!-- 删除 -->
          <img
            v-if="height"
            class="list_shanchu"
            @click.stop="listshanchuClick(v.materialId)"
            :src="img.shanchu"
          />
        </div>
        <p class="list_p">{{ v.materialName }}</p>
      </div>
    </transition-group>
    <div v-if="iflistcon" class="list_null">
      <p>没有匹配内容</p>
    </div>
  </div>
</template>

<script>
import mixin from "@/utils/mixin";
import { postMaterialHandle } from "@/api/template";

export default {
  watch: {
    rightpicList(newVal) {
      this.rightpicList = newVal;
      if (this.rightpicList.length === 0) {
        this.iflistcon = true;
        this.$refs.scollElement.scrollTop = 0;
      } else this.iflistcon = false;

      this.list = JSON.parse(JSON.stringify(this.rightpicList));
    },

    rightpiclistdel(newVal) {
      let index = this.rightpicList.findIndex((v) => v.materialId === newVal);
      this.rightpicList.splice(index, 1);
    },
    picscrollTop(newVal) {
      if (newVal == 0) this.$refs.scollElement.scrollTop = 0;
    },
    classifypic(newVal) {
      this.$refs.scollElement.scrollTop = 0;
      if (newVal == 1) this.xin = false;
      else this.xin = true;
      if (window.localStorage.getItem("eplatformpowertype") == 1 && newVal == 0)
        this.height = true;
      else this.height = false;
    },
  },
  mixins: [mixin],
  props: [
    "rightlistheight",
    "rightpicList",
    "rightpiclistdel",
    "picscrollTop",
    "classifypic",
  ],
  data() {
    return {
      iflistcon: false,
      height: null,
      list: null,
      xin: true,
    };
  },
  methods: {
    srcollloadmore() {
      this.$datatools.throttle(this.$emit("picListPage"), 2000);
    },
    //内容——左——列2——列表——收藏——点击选中
    async listcollectClick(type, i, materialId) {
      if (type == 0) this.list[i].collectTag = true;
      else this.list[i].collectTag = false;
      await postMaterialHandle({
        listType: 2,
        userId: window.localStorage.getItem("eplatformid"),
        materialId,
        token: window.localStorage.getItem("eplatformtoken"),
        operationType: type, //0添加,1取消
      });
    },
    listimgclick(value, name, id) {
      let obj = {
        src: value,
        name,
      };
      this.$emit("childvalue", obj, id);
      // this.$emit("commonuse", "material", 1, 0, id);
    },
    //删除模板
    listshanchuClick(id) {
      this.$emit("materialDel", id);
    },
    scrollChange() {
      this.$emit("scroll", this.$refs.scollElement.scrollTop);
    },
  },
  created() {
    this.height = this.rightlistheight;
    if (window.localStorage.getItem("eplatformpowertype") == 0)
      this.height = false;
   
  },
  // beforeUpdate(){

  //   this.$refs.scollElement.scrollTop = 0;
  // },
  mounted() {
    // 获取指定元素
    this.$refs.scollElement.addEventListener("scroll", this.scrollChange, true);
  },
  beforeDestroy() {
    // 获取指定元素
    this.$refs.scollElement.removeEventListener(
      "scroll",
      this.scrollChange,
      true
    );
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/frame.less";
.list_list {
  position: relative;
  top: 0;
  left: 0;
  z-index: 90;
  overflow-y: auto;
  width: 104%;
  margin-top: 20px;
  color: @color2;
  height: calc(100% - 90px);
  padding-right: 4%;
  .list_null {
    width: 100%;
    height: 40px;
    .cen();
    font-size: 16px;
  }
  .list {
    .divDWJ();
    display: inline-block;
    position: relative;
    width: calc(50% - 10px);
    height: auto;
    margin-bottom: 20px;
    transition: all 1s;
    overflow: hidden;
    &:nth-child(2n-1) {
      margin-right: 10px;
    }
    &:nth-child(2n) {
      margin-left: 10px;
    }
    .list_div {
      width: 100%;

      // border-radius: @radius1;
      .xin {
        cursor: pointer;
        position: absolute;
        width: 18px;
        height: 18px;
        bottom: 26px;
        right: 8px;
      }
      .list_shanchu {
        position: absolute;
        width: 18px;
        height: 18px;
        top: 8px;
        right: 8px;
        cursor: pointer;
      }
      .list_img_div {
        width: 100%;
        height: 0;
        padding-top: 100%;
        margin: 0;
        border: 1px solid #dedddd;
        border-radius: 5px;

        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      }
    }
    .list_p {
      width: 100%;
      height: 14px;
      text-align: center;
      margin-top: 6px;
    }
  }
}
</style>